<template>
  <div class="glass">
    <div ref="container" class="video-container">
      <video
          ref="video"
          class="video"
          :src="src"
          :poster="poster"
          muted
          loop
          playsinline
      ></video>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AutoPlayVideo',
  props: {
    src: {
      type: String,
      default:
          'https://webpub.shlab.tech/dps/opendatalab-web/mineru-website-csr-prod.1981/assets/home-Sa0hpDh_.mp4'
    },
    poster: {
      type: String,
      default:
          'https://webpub.shlab.tech/dps/opendatalab-web/mineru-website-csr-prod.1981/assets/home-Sa0hpDh_.mp4?x-oss-process=video/snapshot,t_0,f_jpg,w_530,h_400,m_fast'
    }
  },
  mounted() {
    this.observer = new IntersectionObserver(
        ([entry]) => {
          const video = this.$refs.video
          if (!video) return
          entry.isIntersecting ? video.play() : video.pause()
        },
        {threshold: 0.5}
    )
    this.observer.observe(this.$refs.container)
  },
  beforeDestroy() {
    if (this.observer) this.observer.disconnect()
  }
}
</script>
<style scoped>
.video-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  box-shadow: 0 100px 40px rgba(0, 0, 0, 0.8);
}

/* 视频放在上层 */
.video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.glass::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -1;
  border-radius: 20px;
  background-color: rgba(50, 100, 255, 0.215);
  //background: linear-gradient(45deg, rgba(50, 100, 255, 0.3), rgba(50, 100, 255, 0.1) 50%);
  filter: blur(20px);
  opacity: 0.6;
}

.glass {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 78%;
  height: auto;
  border: none;
  border-radius: 20px;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background-color: transparent; /* 交由伪元素处理背景 */
  box-shadow:
      0 -100px 30px rgba(49, 98, 250, 0.05), /* 顶部阴影 */
      0 30px 30px rgba(50, 100, 255, 0.03),  /* 底部阴影 */
      -80px 0 30px rgba(50, 100, 255, 0.04), /* 左边阴影 */
      80px 0 30px rgba(50, 100, 255, 0.04),  /* 右边阴影 */
      0 0 60px 80px rgba(76, 250, 49, 0.07);        /* 中央扩散（解决四角） */

}
</style>
